<script setup lang="ts">
import {NO_DATA_FOUND_TEXT} from '~/common/constants'
import {useSystemStore} from '~/store/system'

const nuxtApp = useNuxtApp()
const systemStore = useSystemStore()

defineProps({
  newsDataList: {
    type: Array<Object>,
    require: true
  },
  articleDataList: {
    type: Array<Object>,
    require: true
  }
})

const entryListWrapRef = ref()

onMounted(async () => {
  // 创建一个 MutationObserver 实例
  const observer = new MutationObserver(function(mutationsList) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        const addedNodes = mutation.addedNodes
        for (let i = 0; i < addedNodes.length; i++) {
          const addedNode = addedNodes[i]
          if (addedNode.nodeType === Node.ELEMENT_NODE && (addedNode.classList.contains('list-wrapper') || mutation.target.classList.contains('n-tabs-pane-wrapper'))) {
            systemStore.homePageImageLazyLoad()
            break
          }
        }
      }
    }
  });
  await nextTick(() => {
    observer.observe(entryListWrapRef.value, {
      childList: true,
      subtree: true
    })
  })
})

const emit = defineEmits(['tabChange'])
const onTabChange = (tab) => emit('tabChange', tab)
const handleListItemClick = (item, type, e) => {
  e.preventDefault()
  e.stopPropagation()
  let url
  if (type === 'news') {
    url = `${systemStore.siteInfo['site-url']}/news/${item.id}`
  } else {
    url = `${systemStore.siteInfo['site-url']}/article/${item.id}`
  }
  navigateTo(url, {
    replace: true,
    open: {
      target: '_blank'
    }
  })
}
</script>

<template>
    <div class="entry-list-container">
      <ClientOnly>
        <!-- 数据列表 start-->
        <div class="entry-list-wrap" ref="entryListWrapRef">
          <n-tabs type="line" animated :on-update-value="onTabChange">
            <n-tab-pane v-if="systemStore.currentCategoryId === 0" name="news" tab="咨询">
                <div class="list-wrapper" v-if="systemStore.indexNewsDataLoaded">
                  <ul class="entry-list" v-if="newsDataList?.length">
                    <li class="item" v-for="item in newsDataList" :key="item.id" @click="handleListItemClick(item,'news', $event)">
                      <div class="entry">
                        <div class="meta-container">
                          <NuxtLink to="#" class="user-message" target="_blank" v-if="item.author">
                            <div class="popover-box user-popover">#{{item.author}}</div>
                          </NuxtLink>
                          <div class="date">{{item.publishDate}}</div>
                          <div class="tag-list" v-if="item.tags && item.tags.length">
                            <NuxtLink to="#" class="tag" v-for="(tag, index) in item.tags" :key="index">{{tag}}</NuxtLink>
                          </div>
                        </div>
                        <div class="content-wrapper">
                          <div class="content-main">
                            <div class="title-row">
                              <NuxtLink :to="systemStore.siteInfo['site-url']+'/news/'+item.id" class="title" target="_blank" :alt="item.title">{{item.title}}</NuxtLink>
                            </div>
                            <div class="abstract">
                              <NuxtLink :to="systemStore.siteInfo['site-url']+'/news/'+item.id" class="title" target="_blank">{{item.summary}}</NuxtLink>
                            </div>
                            <ul class="action-list" v-if="item.viewCount !== undefined">
                              <li class="item view">
                                <i-ep-view/>
                                <span>{{item.viewCount}}</span>
                              </li>
                              <li class="item like">
                                <i-ant-design-like-outlined/>
                                <span>{{item.likeCount}}</span>
                              </li>
                              <li class="item comment">
                                <i-ep-chat-dot-square/>
                                <span>{{item.commentCount}}</span>
                              </li>
                            </ul>
                          </div>
                          <div class="lazy">
                            <img :data-src="item.thumbUrl" class="thumb"/>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <NEmpty v-else :description="NO_DATA_FOUND_TEXT"/>
                </div>
                <div v-else class="skeleton">
                  <n-skeleton text :style="{
                      width: '40%',
                      height: '18px',
                      marginTop:  '15px',
                      marginBottom: '15px'
                    }" />
                                <n-skeleton text :style="{
                      width: '100%',
                      height: '18px',
                      marginBottom: '15px'
                    }"/>
                                <n-skeleton text :style="{
                      width: '80%',
                      height: '18px',
                      marginBottom: '15px'
                    }"/>
                                <n-skeleton text :style="{
                      width: '60%',
                      height: '18px'
                    }"/>
                </div>
            </n-tab-pane>
            <n-tab-pane name="articles" tab="文章">
              <div class="list-wrapper" v-if="systemStore.indexArticlesDataLoaded">
                <ul v-if="articleDataList?.length" class="entry-list">
                  <li class="item" v-for="item in articleDataList" :key="item.id" @click="handleListItemClick(item,'article',$event)">
                    <div class="entry">
                      <div class="meta-container">
                        <NuxtLink to="#" class="user-message" target="_blank" v-if="item.author">
                          <div class="popover-box user-popover">#{{item.author}}</div>
                        </NuxtLink>
                        <div class="date article">{{$moment.fromNow(item.publishTime)}}</div>
                        <div class="tag-list" v-if="item.tagList && item.tagList.length">
                          <NuxtLink to="#" class="tag" v-for="(tag, index) in item.tagList" :key="index">{{tag.name}}</NuxtLink>
                        </div>
                      </div>
                      <div class="content-wrapper">
                        <div class="content-main">
                          <div class="title-row">
                            <NuxtLink :to="systemStore.siteInfo['site-url']+'/article/'+item.id" class="title" target="_blank" :alt="item.title">{{item.title}}</NuxtLink>
                          </div>
                          <div class="abstract">
                            <NuxtLink :to="systemStore.siteInfo['site-url']+'/article/'+item.id" class="title" target="_blank">{{item.summary}}</NuxtLink>
                          </div>
                          <ul class="action-list" v-if="item.viewCount !== undefined">
                            <li class="item view" v-if="!$device.isMobile">
                              <i-ep-view/>
                              <span>{{item.viewCount}}</span>
                            </li>
                            <li class="item like">
                              <i-ant-design-like-outlined/>
                              <span>{{item.likeCount}}</span>
                            </li>
                            <li class="item comment">
                              <i-ep-chat-dot-square/>
                              <span>{{item.commentCount}}</span>
                            </li>
<!--                            <li class="item dislike" v-if="!$device.isMobile">-->
<!--                              <NPopover trigger="hover" :show-arrow="false" placement="bottom">-->
<!--                                <template #trigger>-->
<!--                                  <i-ep-more-filled/>-->
<!--                                </template>-->
<!--                                <span>没有箭头就是矩形了</span>-->
<!--                              </NPopover>-->
<!--                            </li>-->
                          </ul>
                        </div>
                        <div class="lazy" v-if="item.thumbUrl">
                          <img :data-src="item.thumbUrl" class="thumb"/>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <NEmpty v-else :description="NO_DATA_FOUND_TEXT"/>
              </div>
              <div v-else class="skeleton">
                <n-skeleton text :style="{
                      width: '40%',
                      height: '18px',
                      marginTop:  '15px',
                      marginBottom: '15px'
                    }" />
                <n-skeleton text :style="{
                      width: '100%',
                      height: '18px',
                      marginBottom: '15px'
                    }"/>
                <n-skeleton text :style="{
                      width: '80%',
                      height: '18px',
                      marginBottom: '15px'
                    }"/>
                <n-skeleton text :style="{
                      width: '60%',
                      height: '18px'
                    }"/>
              </div>
            </n-tab-pane>
          </n-tabs>
        </div>
        <!-- 数据列表 end-->
      </ClientOnly>
    </div>
</template>

<style scoped lang="scss">
  .entry-list-container {
    background-color: var(--tidy-layer-1);
    border-radius: 4px;
    .entry-list-wrap {
      :deep(.n-tabs-nav--top) {
        padding: 10px 15px;
      }
      .list-wrapper {
        padding-bottom: 10px;
      }
      .entry-list {
        position: relative;
        .item {
          &:last-child {
            .content-wrapper {
              border-bottom: none!important;
            }
          }
          .entry {
            cursor: pointer;
            position: relative;
            background: var(--tidy-layer-1);
            padding: 12px 20px 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .meta-container {
              display: flex;
              align-items: center;
              color: var(--tidy-font-3);

              .user-message {
                display: flex;
                align-items: center;
                margin-right: 12px;
                max-width: 162px;
                font-size: 13px;
                line-height: 22px;
                color: var(--tidy-font-2);
                @include text-overflow;

                .user-popover {
                  display: inline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .popover-box {
                  display: flex;
                  align-items: center;
                }
              }

              .date {
                position: relative;
                line-height: 22px;
                font-size: 13px;
                flex-shrink: 0;

                &:not(:first-child), &:not(:last-child) {
                  padding: 0 12px;
                }

                &:not(:first-child):before, &:not(:last-child):after {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  display: block;
                  width: 1px;
                  height: 12px;
                  background: var(--tidy-gray-1-1);
                  content: " ";
                }
                &:not(:last-child):after {
                  display:none;
                }

                &:not(:first-child):before {
                  left: 0;
                }

                &:not(:last-child):after {
                  right: 0;
                }
              }

              .tag-list {
                display: flex;
                height: 22px;
                overflow: hidden;
                position: absolute;
                top: 16px;
                right: 20px;
              }
            }

            .content-wrapper {
              display: flex;
              padding-bottom: 12px;
              border-bottom: 1px solid var(--tidy-gray-1-1);
              margin-top: 10px;
              width: 100%;

              :deep(.n-image) {
                img {
                  flex: 0 0 auto;
                  margin-left: 24px;
                  border-radius: 2px;
                }
              }

              .content-main {
                flex: 1 1 auto;

                .title-row {
                  display: flex;
                  margin-bottom: 8px;

                  .title {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 24px;
                    color: var(--tidy-font-1);
                    width: 100%;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                  }
                }

                .abstract {
                  margin-bottom: 8px;

                  a {
                    color: var(--tidy-font-3);
                    font-size: 13px;
                    line-height: 22px;
                    @include text-overflow-1;
                  }
                }
              }

              .lazy {
                position: relative;
                &.loaded {
                  &:before {
                    display:none;
                  }
                }
                &:before {
                  position: absolute;
                  display:flex;
                  width:100%;
                  height:100%;
                  align-items: center;
                  justify-content: center;
                  top:0;
                  left:0;
                  background-color: var(--tidy-gray-3);
                  content: "加载中";
                  color:#333;
                }
              }
            }
          }
        }
      }
      .skeleton {
        padding: 0 15px 15px 15px;
      }
    }
  }
</style>
